<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基于vue-router案例</title>
    <style scoped>
        .header {
            height: 60px;
            background-color: rgb(57, 87, 100);
            color: aliceblue;
            text-align: center;
            line-height: 60px;
            font-size: 25px;
        }
        
        ul,
        li {
            margin-bottom: 5px;
            padding: 0;
            width: 260px;
            height: 50px;
            list-style: none;
            background-color: rgb(137, 141, 141);
            text-align: center;
            line-height: 50px;
        }
        
        .router-link-active {
            text-decoration: none;
            color: aliceblue;
        }
        
        a {
            text-decoration: none;
        }
        
        ul {
            margin: 0;
            height: 600px;
            background-color: rgb(9, 131, 131);
        }
        
        .main {
            display: flex;
        }
        
        .footer {
            height: 40px;
            background-color: rgb(9, 109, 109);
            color: aliceblue;
            text-align: center;
            line-height: 40px;
            font-size: 15px;
        }
        
        .right {
            width: 1000px;
            text-align: center;
        }
        
        table {
            margin: 0 auto;
        }
        
        th {
            color: aliceblue;
            height: 50px;
            width: 240px;
            background-color: rgb(137, 141, 141);
        }
        
        td {
            height: 30px;
            background-color: rgb(239, 244, 247);
            border: 1px solid rgb(137, 141, 141);
            padding: 10px;
        }
    </style>
    <script src="./vue.js"></script>
    <script src="../vue-router.js"></script>
</head>

<body>
    <!-- 要被vue实例所控制得区域 -->
    <div id="app">
        <!-- 路由占位符 -->
        <router-view></router-view>
    </div>


    <script>
        // 定一个根组件
        const App = {
            template: `
            <div>
                <!-- 头部区域 -->
                <header class="header">后台管理系统</header>
                <!-- 中间区域 -->
                <div class="main">
                    <!-- 左侧菜单栏 -->
                    <div class="left">
                        <ul>
                           <li><router-link to="/users">用户管理</router-link></li>
                           <li><router-link to="/rights">权限管理</router-link></li>
                           <li><router-link to="/goods">商店管理</router-link></li>
                           <li><router-link to="/orders">订单管理</router-link></li>
                           <li><router-link to="/settings">系统管理</router-link></li>
                        </ul>
                    </div>
                    <!-- 右侧内容区域 -->
                    <div class="right">
                        <div class="main-content"><router-view /></div>
                    </div>
                </div>
                <!-- 尾部区域 -->
                <footer class="footer">版权信息</footer>
            </div>`
        }

        // 路由组件 
        const User = {
            data() {
                return {
                    userlist: [{
                        id: 1,
                        name: '张三',
                        age: 10
                    }, {
                        id: 2,
                        name: '李四',
                        age: 20
                    }, {
                        id: 3,
                        name: '王五',
                        age: 30
                    }, {
                        id: 4,
                        name: '赵六',
                        age: 40
                    }, ]
                }

            },
            methods: {
                goDetail(id) {
                    console.log(id);
                    this.$router.push('/userinfo/' + id)
                }
            },

            template: `<div>
                <h3>用户管理系统</h3>
                <table>
                    <thead>
                        <tr><th>编号</th><th>姓名</th><th>年龄</th><th>操作</th></tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in userlist" :key="item.id">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.age}}</td>
                            <td>
                                <a href="javascript:;" @click="goDetail(item.id)">详情</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>`
        }
        const UserInfo = {
            props: ['id'],
            template: `
            <div>
                <h3>用户详情 ---用户详情id为：{{id}}</h3>
                <button @click="goBack">后退</button>
            </div>`,
            methods: {
                goBack() {
                    // 实现后退功能
                    this.$router.go(-1)
                }
            }
        }
        const Rights = {
            template: `<div>
                <h3>权限管理系统</h3>
            </div>`
        }
        const Goods = {
            template: `<div>
                <h3>商品管理系统</h3>
            </div>`
        }
        const Orders = {
            template: `<div>
                <h3>订单管理系统</h3>
            </div>`
        }
        const Settings = {
            template: `<div>
                <h3>系统管理系统</h3>
            </div>`
        }

        // 创建路由对象
        const router = new VueRouter({
            // 路由规则
            routes: [{
                path: '/',
                component: App,
                // 路由重定向
                redirect: '/users',
                // 子路由规则
                children: [{
                    path: '/users',
                    component: User
                }, {
                    path: '/userinfo/:id',
                    component: UserInfo,
                    // props接受路由传递过来的参数
                    props: true
                }, {
                    path: '/rights',
                    component: Rights
                }, {
                    path: '/goods',
                    component: Goods
                }, {
                    path: '/orders',
                    component: Orders
                }, {
                    path: '/settings',
                    component: Settings
                }, ]

            }]
        })

        const m = new Vue({
            el: '#app',
            // 把路由规则挂载到实例对象
            router
        })
    </script>

</body>

</html>